<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>登录 · 扁平化风格</title>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/styles01.css" />
  </head>
  <body>
    <main class="auth-page">
      <section class="login" aria-label="登录表单">
        <div class="brand" aria-hidden="true">
          <div class="logo"></div>
          <h1 class="title">前端求职 · 登录</h1>
        </div>
        <p class="desc">请输入用户名与密码登录</p>

        <form id="login-form" novalidate>
          <div class="field">
            <label for="username">用户名</label>
            <input id="username" name="username" type="text" placeholder="例如：student001" autocomplete="username" required />
          </div>

          <div class="field">
            <label for="password">密码</label>
            <input id="password" name="password" type="password" placeholder="请输入密码" autocomplete="current-password" required />
          </div>

          <div class="row">
            <label class="remember"><input type="checkbox" name="remember" /> 记住我</label>
            <a href="#" aria-label="忘记密码">忘记密码？</a>
          </div>

          <button type="submit">登录</button>
          <p class="hint">此为示例页面，仅演示前端表单与样式。如需真实登录，请接入后端接口。</p>
        </form>
      </section>
    </main>

    <script>
      const form = document.getElementById('login-form');
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        const username = form.username.value.trim();
        const password = form.password.value.trim();
        if (!username || !password) {
          alert('请填写用户名和密码');
          return;
        }
        // 演示：仅前端校验与提示
        alert(`登录成功（示例）\n用户名：${username}\n记住我：${form.remember.checked ? '是' : '否'}`);
      });
    </script>
  </body>
</html>